<template>
    <div class="pmjl-container">
        <table class="pmjl-table" border="1">
            <caption>压力预测图</caption>
            <colgroup>
                <col width="33%" />
                <col width="33%" />
                <col width="33%" />
            </colgroup>

            <tr style="height: 5rem;text-align: center;vertical-align: bottom;">
                <td>ROP</td>
                <td>
                    <div class="c-red">C_isotope</div>
                    <hr class="c-red" />
                    <div class="c-red both-clear">
                        <span class="pull-left">-60</span>
                        <span class="pull-right">0</span>
                    </div>
                    <div>Coco3</div>
                </td>
                <td>
                    <div class="c-red">C1</div>
                    <hr class="c-red" />
                    <div class="c-red both-clear">
                        <span class="pull-left">0.1</span>
                        <span class="pull-right">10</span>
                    </div>
                    <div>TG<small>25</small></div>
                </td>
            </tr>
            <tr style="height: 1rem;">
                <td>
                    <span class="pull-left">0</span>
                    <span class="pull-right">15</span>
                </td>
                <td>
                    <span class="pull-left">0</span>
                    <span class="pull-right">20</span>
                </td>
                <td>
                    <span class="pull-left">0.1</span>
                    <span class="pull-right">10</span>
                </td>
            </tr>
            <tr class="tr-chart">
                <td>
                    <div id="chart1" class="chart-container"></div>
                </td>
                <td>
                    <div id="chart2" class="chart-container"></div>
                </td>
                <td>
                    <div id="chart3" class="chart-container"></div>
                </td>
            </tr>
        </table>
        <!-- <div id="chart" style="width: 100%;height:500px;"></div> -->
    </div>
</template>

<script>
import api from '@/api/api.js';

export default {
    name: 'YourComponent',
    mounted() {
        this.$nextTick(this.initialize);
    },
    data() {
        return {
            chart1: null,
            chart2: null,
            chart3: null,
            echartsData: []
        }
    },
    methods: {
        initialize() {
            this.chart1 = this.$echarts.init(document.getElementById('chart1'));
            this.chart2 = this.$echarts.init(document.getElementById('chart2'));
            this.chart3 = this.$echarts.init(document.getElementById('chart3'));
            this.retrieveEchartsData();
        },
        retrieveEchartsData() {
            api.post('/ylyc/getYlycchartsList')
                .then(response => {
                    // 处理成功的响应
                    this.echartsData = response.data.ylycEchartsList || [];
                    return this.echartsData;
                }).then(this.renderEcharts).catch(() => {
                    this.echartsData = [];
                })
        },
        renderEcharts() {
            var depths = [];
            var pps = [];
            var pcs = [];
            var pfs = [];
            this.echartsData.forEach(item => {
                depths.push(item.depth);
                pps.push(item.pp);
                pcs.push(item.pc);
                pfs.push(item.pf);
            });
            this.renderChart1(pps, depths);
            this.renderChart2(pcs, depths);
            this.renderChart3(pfs, depths);
        },
        renderChart1(ds, depths) {
            const option = {
                grid: {
                    top: 0,
                    left: 0,
                    right: 0,
                    bottom: 0
                },
                tooltip: {
                    trigger: 'axis'
                },
                yAxis: {
                    type: 'category',
                    data: depths
                },
                xAxis: {
                    type: 'value',
                    axisLine: {
                        show: true
                    }
                },
                series: [
                    {
                        name: 'pp',
                        type: 'line', // 这里设置曲线的类型为'line'，你也可以设置为'area'来创建面积图等
                        data: ds,
                        symbol: 'none', // 不显示数据点
                    }
                ]
            };
            this.chart1.setOption(option);
        },
        renderChart2(ds, depths) {
            const option = {
                grid: {
                    top: 0,
                    left: 0,
                    right: 0,
                    bottom: 0
                },
                tooltip: {
                    trigger: 'axis'
                },
                yAxis: {
                    type: 'category',
                    data: depths
                },
                xAxis: {
                    type: 'value',
                    axisLine: {
                        show: true
                    }
                },
                series: [
                    {
                        name: 'pc',
                        type: 'line', // 这里设置曲线的类型为'line'，你也可以设置为'area'来创建面积图等
                        data: ds,
                        symbol: 'none', // 不显示数据点
                    }
                ]
            };
            this.chart2.setOption(option);
        },
        renderChart3(ds, depths) {
            const option = {
                grid: {
                    top: 0,
                    left: 0,
                    right: 0,
                    bottom: 0
                },
                tooltip: {
                    trigger: 'axis'
                },
                yAxis: {
                    type: 'category',
                    data: depths
                },
                xAxis: {
                    type: 'value',
                    axisLine: {
                        show: true
                    }
                },
                series: [
                    {
                        name: 'pf',
                        type: 'line', // 这里设置曲线的类型为'line'，你也可以设置为'area'来创建面积图等
                        smooth: true,
                        data: ds,
                        symbol: 'none', // 不显示数据点
                    }
                ]
            };
            this.chart3.setOption(option);
        },
        initChart() {
            // 基于准备好的dom，初始化echarts实例
            const myChart = this.$echarts.init(document.getElementById('chart'));
            var depths = [];
            var pps = [];
            var pcs = [];
            var pfs = [];
            api.post('/pmjl/getPmjlEchartsList')
                .then(response => {
                    // 处理成功的响应
                    this.echartsData = response.data.pmjlEchartsList;
                    this.echartsData.forEach(item => {
                        depths.push(item.depth);
                        pps.push(item.pp);
                        pcs.push(item.pc);
                        pfs.push(item.pf);
                    });
                    console.log('cccccccccccccc:', depths);
                    // 指定图表的配置项和数据
                    const option = {
                        title: {
                            text: '地层三压力剖面'
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['pp', 'pc', 'pf']
                        },
                        yAxis: {
                            type: 'category',
                            data: depths
                        },
                        xAxis: {
                            type: 'value',
                            axisLine: {
                                show: true
                            }
                        },
                        series: [
                            {
                                name: 'pp',
                                type: 'line', // 这里设置曲线的类型为'line'，你也可以设置为'area'来创建面积图等
                                data: pps
                            },
                            {
                                name: 'pc',
                                type: 'line', // 这里设置曲线的类型为'line'，你也可以设置为'area'来创建面积图等
                                data: pcs
                            },
                            {
                                name: 'pf',
                                type: 'line', // 这里设置曲线的类型为'line'，你也可以设置为'area'来创建面积图等
                                smooth: true,
                                data: pfs
                            }
                        ]
                    };
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                })
                .catch(error => {
                    console.error('There was an error!', error);
                });
        }
    },
}
</script>

<style lang="css" scoped>
.pmjl-container {
    width: 100%;
    overflow: hidden;
    padding: 0 3rem;
}

.pmjl-table {
    border-collapse: collapse;
    width: 100%;
}

.tr-chart td {
    padding: 0;
}

.chart-container {
    height: 500px;
}

.pull-left {
    float: left;
    top: 0
}

.pull-right {
    float: right;
    top: 0
}

.c-red {
    color: red;
}

.both-clear {
    clear: both;
    height: 1.25rem;
    line-height: 1.25rem;
}
</style>